<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link type="text/css" href="/web/css/normalize.css" rel="stylesheet" />
<link type="text/css" href="/web/css/style.css" rel="stylesheet" />
<link type="text/css" href="/web/css/login.css" rel="stylesheet" />
<link type="text/css" href="/web/css/slider.css" rel="stylesheet" />
<link type="text/css" href="/web/css/animate.css" rel="stylesheet" />
<link href="/web/layui/css/layui.css" rel="stylesheet" type="text/css"/>
</head>
<body class="bgs">
<div class="login_bg">
    <div class="lunbo block-slider block-slider4">
        <ul id="bxslider-home4">
            <li><img src="images/login01.jpg" /></li>
            <li><img src="images/login02.jpg" /></li>
            <li><img src="images/login03.jpg" /></li>
        </ul>
    </div>
        <div class="loginform">
            <div class="logintitle">登录LOGIN</div>
            <form action="#" id="loginForm" onsubmit="return false;">
                <div class="userbox" data-animate="shake" data-duration="1.0s" data-delay="0.1s"  data-iteration="1">
                    <img src="images/person.png" alt="" />
                    <input type="text" placeholder="请输入账号" name="username" autocomplete="off" value="" data-rule="用户名:required;username" id="username" onblur="checkUser()" onfocus="checkUserfocus()" />
                    <span class="s_username">* 请输入账号</span>
                </div>
                <div class="passbox" data-animate="shake" data-duration="1.0s" data-delay="0.1s"  data-iteration="1">
                    <img src="images/password.png" alt="" />
                    <input type="password" placeholder="请输入密码" name="password" autocomplete="off" value="" data-rule="密码:required;password" id="password"  onblur="checkPassword()" onfocus="checkPassfocus()" />
                    <span class="s_password">* 请输入密码</span>
                </div>
                <!--滑块图片验证开始-->
                <div class="huadong">
                    <div class="g-hd layout-quick  g-sd2">
                    <ul class="tcapt-tabs__container">
                        <li captcha-mode="float" class="tcapt-tabs__tab" style="list-style: none"></li>
                    </ul>
                    <div class="j-captcha" data-type="jigsaw"></div>
                     </div>
                </div>
                <!--滑块图片验证结束-->
                <div class="remember">
                    <input type="checkbox" id="check_box"> <span>记住密码</span>
                </div>
                <button type="submit" class="btn" onclick="checkForm()">登录</button>
            </form>
        </div>
</div>

<script src="/web/js/t_layout_base_m0.js"></script>
<script src="/web/js/load.min.js"></script>
<script src="/web/js/core.js"></script>
<script src="/web/js/pt_experience_captcha_drag.js"></script>
<script>
    //验证用户名和密码是都为空
     userBox = document.querySelector(".userbox");
     userName = document.querySelector("#username");
     s_username = document.querySelector(".s_username");
     passBox = document.querySelector(".passbox");
     passWord = document.querySelector("#password");
     s_password = document.querySelector(".s_password");
    function checkUser() {
        if(userName.value.length < 1){
            userBox.className = 'userbox animate-box';
            s_username.style.display = 'block';
            !function(i){var t,n,a={init:function(i,o){t=i,n=o,a.bind()},bind:function(){i(window).scroll(function(){a.animate(t,n)}),i(window).trigger("scroll")},animate:function(t,n){var a=i(window).height(),o=i(window).scrollTop(),s=o+a;i.each(t,function(){var t=i(this).data("animate"),a=i(this).data("offset"),e=i(this).data("duration"),d=i(this).data("delay"),r=i(this).data("iteration"),h=i(this).outerHeight(),c=i(this).offset().top,l=c+h;a&&(c+=a,l-=a),i(this).css({"-webkit-animation-duration":e,"animation-duration":e}),i(this).css({"-webkit-animation-delay":d,"animation-delay":d}),i(this).css({"-webkit-animation-iteration-count":r,"animation-iteration-count":r}),l>=o&&c<=s?(i(this).css("visibility","visible"),i(this).addClass(t),i(this).addClass("animated")):n.once===!1&&(i(this).css("visibility","hidden"),i(this).removeClass(t),i(this).removeClass("animated"))})}};jQuery.fn.scrolla=function(t){return t=i.extend({mobile:!1,once:!1},t),(t.mobile!==!1||!/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))&&void a.init(this,t)}}(jQuery);

            $('.animate-box').scrolla({
                mobile: false,
                once: false
            })
        }else{
            userBox.className = 'userbox';
            s_username.style.display = 'none'
        }
    }
    function checkUserfocus(){
        let s_username = document.querySelector(".s_username");
        s_username.style.display = 'none'
    }

    function checkPassword() {
        if(passWord.value.length < 1){
            passBox.className = 'passbox animate-box';
            s_password.style.display = 'block';
            $('.animate-box').scrolla({
                mobile: false,
                once: false
            })
        }else{
            passBox.className = 'userbox';
            s_password.style.display = 'none'
        }
    }

    function checkPassfocus(){
        let s_password = document.querySelector(".s_password");
        s_password.style.display = 'none'
    }
</script>
<script src="/web/js/jquery.min.js"></script>
<script src="/web/js/jquery.cookie.min.js"></script>
<script src="/web/layui/layui.js"></script>
<script>
    //是否保存过登录账号密码
    if ($.cookie('userinfo')){
        $('#username').val($.cookie('userinfo'));
    }
    if ($.cookie('passinfo')){
        $('#password').val($.cookie('passinfo'));
    }
    function checkForm() {
        let yidunSlider = document.querySelector(".yidun_slider");
        if (yidunSlider.style.cssText == 'width: 40px; border-radius: 2px;' || yidunSlider.style.cssText == 'width: 40px; border-radius: 2px; left: 0px;' || yidunSlider.style.cssText == 'width: 40px; border-radius: 2px; left: 0px; transition: left 0.3s ease-out 0s;' || yidunSlider.style.cssText == 'width: 40px; border-radius: 2px; left: 380px;'){
            layer.msg('请先完成验证', {icon: 2, time: 1000}, function () {
                return false;
            });
        }else{
            let isChecked = $('#check_box').prop('checked');
            username = $('#username').val();
            password = $('#password').val();
            $.ajax({
                type: "POST",
                dataType: "json",
                url: '/login',
                data: {'username':username,'password':password},
                success: function (data) {
                    console.log(data);
                    if (data.status == 0){
                        layer.msg(data.message, {icon: 2, time: 1000}, function () {
                            return false;
                        });
                    }else{
                        if (isChecked){
                            $.cookie('userinfo', username, { expires: 7 });
                            $.cookie('passinfo', password, { expires: 7 });
                        }
                        layer.msg(data.message, {icon: 1, time: 1000}, function () {
                            window.location.href = "/web/home.html";
                        });
                    }
                },
                error: function (msg) {
                    console.log(msg);
                }
            });
        }
    }
</script>
<script type="text/javascript" src="js/bxslider.min.js"></script>
<script type="text/javascript" src="js/script.slider.js"></script>
</body>
</html>
